<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_react生命周期(旧)</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入React -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 创建组件
        /**
         * 生命周期钩子函数
         * 1. 初始化阶段：由ReactDOM.render()触发——初次渲染
         *    constructor → componentWillMount → render → componentDidMount
         *    🚩常用： componentDidMount（一般在这个钩子中做一些初始化的操作，开启定时器、发送网络请求、订阅消息）
         *    🚩必用： render
         * 2. 更新阶段：由组件内部this.setState()或父组件重新render触发（正常更新）
         *    shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate
         * 3. 强制更新阶段（forceUpdate流程）
         *    componentWillUpdate → render → componentDidUpdate
         * 4. 卸载阶段：由ReactDOM.unmountComponentAtNode()触发
         *    componentWillUnmount
         *    🚩常用：一般在这个钩子中做一些收尾的操作，关闭定时器、取消订阅消息
         * 5. 子组件生命周期钩子函数执行顺序
         *    componentWillReceiveProps → shouldComponentUpdate → componentWillUpdate → render → componentDidUpdate
         */
        class Sum extends React.Component {
            // 构造函数或构造器方法
            constructor(props) {
                console.log('sum - constructor');
                super(props)
                this.state = { count: 0 }
            }
            // 求和的按钮回调
            sum = () => {
                const { count } = this.state;
                this.setState({ count: count + 1 })
            }
            // 卸载组件的按钮回调
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            // 强制更新组件的按钮回调
            force = () => {
                this.forceUpdate()
            }
            // 组件将要挂载的钩子
            componentWillMount() {
                console.log('sum - componentWillMount');
            }
            // 组件挂载完毕的钩子（可以操作DOM）
            componentDidMount() {
                console.log('sum - componentDidMount');
            }
            // 组件将要卸载的钩子（组件将要被移除）
            componentWillUnmount() {
                console.log('sum - componentWillUnmount');
            }
            // 控制组件更新的钩子（阀门）
            shouldComponentUpdate() {
                console.log('sum - shouldComponentUpdate');
                return true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('sum - componentWillUpdate');
            }
            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('sum - componentDidUpdate');
            }

            // 初始化渲染，状态更新之后
            render() {
                console.log('sum - render');
                return (
                    <div>
                        <h1>当前求和为：{this.state.count}</h1>
                        <button onClick={this.sum}>点我+1</button>&nbsp;
                        <button onClick={this.death}>卸载组件</button>&nbsp;
                        <button onClick={this.force}>不该状态强制更新一下</button>
                    </div>
                )
            }
        }
        class A extends React.Component {
            state = { car: '奔驰' };
            render() {
                console.log('A - render');

                return (
                    <div>
                        <p>我是A组件</p>
                        <button onClick={() => { this.setState({ car: '宝马' }) }}>换车</button>
                        <B carName={this.state.car} />
                    </div>
                )
            }
        }
        class B extends React.Component {
            // 组件将要接收到新的props的钩子（即将更新）
            componentWillReceiveProps(nextProps) {
                console.log('B - componentWillReceiveProps', nextProps);
            }
            // 控制组件更新的钩子（阀门）
            shouldComponentUpdate() {
                console.log('B - shouldComponentUpdate');
                return true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('B - componentWillUpdate');
            }
            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('B - componentDidUpdate');
            }

            render() {
                console.log('B - render');
                return (
                    <div>
                        <p>我是B组件,接收到的车是{this.props.carName}</p>
                    </div>
                )
            }
        }

        // 渲染组件
        ReactDOM.render(<A />, document.getElementById('test'))
    </script>
</body>

</html>